<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<img src="image/1.jpg">
<br>
<img data-src="image/2.png" alt="图片还没有显示">
<script>
    var imgs = document.getElementsByTagName('img');
    window.onscroll = function(){
        console.log("图片的绝对位置"+imgs[0].offsetTop)
        console.log("被隐藏在窗体后的高度"+document.body.scrollTop);
        console.log("窗体的高度"+document.documentElement.clientHeight);

        var wH = document.documentElement.clientHeight;
        var wHideH = document.body.scrollTop;
        if (wH+wHideH+100>imgs[1].offsetTop){
            console.log(imgs[1].getAttribute('data-src'));
            imgs[1].src = imgs[1].getAttribute('data-src');
        }

    }
</script>
</body>
</html>